<!doctype html>
<html>

<head>
    <link href="css/base.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <article class="blogs">
        <h2 class="title_tj">
            <p>文章<span>推荐</span></p>
        </h2>
        <div class="newblog left" id="bloglist">

        </div>
    </article>
    <footer>
        <p class="ft-copyright">个人博客</p>
        <div id="tbox">
            <a id="togbook" href=""></a>
            <a id="gotop" href="javascript:void(0)"></a>
        </div>
    </footer>
</body>
<script>
    fetch('/getlist')
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {
            var bloglist = myJson;
            var blogCon = document.getElementById("bloglist");
            for (var i = 0; i < bloglist.length; i++) {
                var innerNode = `<h2><a title="${bloglist[i].chapterName}" href="/detail?chapterId=${bloglist[i].chapterId}">${bloglist[i].chapterName}</a></h2>
                                <figure><img src='${bloglist[i].imgPath}' border='0' width='120' height='120' alt='${bloglist[i].chapterName}'></figure>
                                <ul class="nlist">
                                    <p>${bloglist[i].chapterDes}</p>
                                    <a title="${bloglist[i].chapterName}" href="/detail?chapterId=${bloglist[i].chapterId}" target="_blank" class="readmore">阅读全文>></a>
                                </ul>
                                <p class="dateview">
                                    <span>发布时间：${bloglist[i].publishTimer}</span>
                                    <span>作者：${bloglist[i].author}</span>
                                    <span>分类：[<a href="##">悠客</a>]</span>
                                    <span class="nl">浏览（${bloglist[i].views}）</span>
                                    <span class="n2">评论（<a href="##">0</a>）</span>
                                    <div class="line"></div>
                                </p>`;
                var el = document.createElement("div");
                el.className = "oneblog";
                el.innerHTML = innerNode;
                console.log(el);
                blogCon.appendChild(el);
            }
        });
</script>

</html>
